import { useState } from 'react'
import { Card, Table, Button, Input, Select, DatePicker, Space, Tag, message, Avatar, Progress } from 'antd'
import { DownloadOutlined, SearchOutlined, ReloadOutlined, EyeOutlined, UserOutlined, BookOutlined, ReadOutlined, ClockCircleOutlined, CheckCircleOutlined, PercentageOutlined } from '@ant-design/icons'
import './index.scss'

const { RangePicker } = DatePicker

const ReadingRecords = () => {
  const [loading, setLoading] = useState(false)
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  
  // 搜索表单状态
  const [searchForm, setSearchForm] = useState({
    userId: '',
    bookName: '',
    status: 'all',
    readingTime: null
  })

  // 模拟数据
  const mockData = [
    {
      key: '1',
      recordId: 10001,
      userId: 1001,
      username: '张三',
      bookId: 2001,
      bookName: '三体：地球往事',
      bookCover: 'https://img1.doubanio.com/view/subject/s/public/s2768378.jpg',
      category: '科幻小说',
      readingProgress: 85,
      readingTime: 320,
      lastReadTime: '2024-10-21 14:30',
      startTime: '2024-10-15 09:20',
      status: '阅读中'
    },
    {
      key: '2',
      recordId: 10002,
      userId: 1002,
      username: '李四',
      bookId: 2002,
      bookName: '活着',
      bookCover: 'https://img2.doubanio.com/view/subject/s/public/s27061786.jpg',
      category: '文学小说',
      readingProgress: 100,
      readingTime: 180,
      lastReadTime: '2024-10-20 20:15',
      startTime: '2024-10-18 10:00',
      status: '已完成'
    },
    {
      key: '3',
      recordId: 10003,
      userId: 1003,
      username: '王五',
      bookId: 2003,
      bookName: '百年孤独',
      bookCover: 'https://img1.doubanio.com/view/subject/s/public/s6384944.jpg',
      category: '文学小说',
      readingProgress: 45,
      readingTime: 150,
      lastReadTime: '2024-10-19 16:45',
      startTime: '2024-10-12 14:30',
      status: '阅读中'
    },
    {
      key: '4',
      recordId: 10004,
      userId: 1004,
      username: '赵六',
      bookId: 2004,
      bookName: '人类简史',
      bookCover: 'https://img2.doubanio.com/view/subject/s/public/s28003154.jpg',
      category: '历史人文',
      readingProgress: 30,
      readingTime: 90,
      lastReadTime: '2024-10-10 11:20',
      startTime: '2024-10-08 09:00',
      status: '已放弃'
    },
    {
      key: '5',
      recordId: 10005,
      userId: 1005,
      username: '孙七',
      bookId: 2005,
      bookName: '平凡的世界',
      bookCover: 'https://img1.doubanio.com/view/subject/s/public/s1144911.jpg',
      category: '文学小说',
      readingProgress: 68,
      readingTime: 240,
      lastReadTime: '2024-10-21 18:00',
      startTime: '2024-10-10 08:30',
      status: '阅读中'
    }
  ]

  // 表格列配置
  const columns = [
    {
      title: '记录ID',
      dataIndex: 'recordId',
      key: 'recordId',
      width: 100,
      align: 'center'
    },
    {
      title: '读者信息',
      key: 'userInfo',
      width: 180,
      render: (_, record) => (
        <div className="user-info-cell">
          <Avatar icon={<UserOutlined />} size={40} />
          <div className="user-details">
            <div className="username">{record.username}</div>
            <div className="user-id">ID: {record.userId}</div>
          </div>
        </div>
      )
    },
    {
      title: '图书信息',
      key: 'bookInfo',
      width: 220,
      render: (_, record) => (
        <div className="book-info-cell">
          <div className="book-cover">
            <img src={record.bookCover} alt={record.bookName} />
          </div>
          <div className="book-details">
            <div className="book-name">{record.bookName}</div>
            <Tag color="blue" size="small">{record.category}</Tag>
          </div>
        </div>
      )
    },
    {
      title: '阅读进度',
      dataIndex: 'readingProgress',
      key: 'readingProgress',
      width: 180,
      render: (progress) => (
        <div className="progress-cell">
          <Progress 
            percent={progress} 
            size="small"
            strokeColor={{
              '0%': '#108ee9',
              '100%': '#87d068',
            }}
          />
        </div>
      )
    },
    {
      title: '阅读时长',
      dataIndex: 'readingTime',
      key: 'readingTime',
      width: 120,
      align: 'center',
      render: (time) => (
        <span className="reading-time">{time} 分钟</span>
      )
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      key: 'startTime',
      width: 180
    },
    {
      title: '最后阅读',
      dataIndex: 'lastReadTime',
      key: 'lastReadTime',
      width: 180
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (text) => {
        const colorMap = {
          '阅读中': 'processing',
          '已完成': 'success',
          '已放弃': 'default'
        }
        return <Tag color={colorMap[text]}>{text}</Tag>
      }
    },
    {
      title: '操作',
      key: 'action',
      width: 120,
      fixed: 'right',
      render: (_, record) => (
        <Space size="small">
          <Button type="link" size="small" icon={<EyeOutlined />}>详情</Button>
        </Space>
      )
    }
  ]

  // 搜索
  const handleSearch = () => {
    setLoading(true)
    setTimeout(() => {
      message.success('搜索成功')
      setLoading(false)
    }, 500)
  }

  // 重置
  const handleReset = () => {
    setSearchForm({
      userId: '',
      bookName: '',
      status: 'all',
      readingTime: null
    })
    message.info('已重置搜索条件')
  }

  // 下载
  const handleDownload = () => {
    message.success('开始导出数据')
  }

  // 行选择
  const rowSelection = {
    selectedRowKeys,
    onChange: (selectedKeys) => {
      setSelectedRowKeys(selectedKeys)
    }
  }

  return (
    <div className="reading-records-container">
      {/* 搜索表格 */}
      <Card className="search-card" title="查询表格">
        <div className="search-form">
          <div className="form-row">
            <div className="form-item">
              <label>用户ID</label>
              <Input
                placeholder="请输入用户ID"
                value={searchForm.userId}
                onChange={(e) => setSearchForm({ ...searchForm, userId: e.target.value })}
              />
            </div>
            <div className="form-item">
              <label>阅读状态</label>
              <Select
                value={searchForm.status}
                onChange={(value) => setSearchForm({ ...searchForm, status: value })}
              >
                <Select.Option value="all">全部</Select.Option>
                <Select.Option value="reading">阅读中</Select.Option>
                <Select.Option value="completed">已完成</Select.Option>
                <Select.Option value="abandoned">已放弃</Select.Option>
              </Select>
            </div>
          </div>

          <div className="form-row">
            <div className="form-item">
              <label>图书名称</label>
              <Input
                placeholder="请输入图书名称"
                value={searchForm.bookName}
                onChange={(e) => setSearchForm({ ...searchForm, bookName: e.target.value })}
              />
            </div>
            <div className="form-item">
              <label>阅读时间</label>
              <RangePicker
                value={searchForm.readingTime}
                onChange={(dates) => setSearchForm({ ...searchForm, readingTime: dates })}
                placeholder={['开始日期', '结束日期']}
              />
            </div>
            <div className="form-item form-actions">
              <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
                查询
              </Button>
              <Button icon={<ReloadOutlined />} onClick={handleReset}>
                重置
              </Button>
            </div>
          </div>
        </div>
      </Card>

      {/* 统计卡片 */}
      <div className="stats-cards">
        <Card className="stat-card">
          <div className="stat-content">
            <div className="stat-info">
              <div className="stat-label">总阅读记录</div>
              <div className="stat-value">2,568</div>
            </div>
            <div className="stat-icon reading">
              <ReadOutlined />
            </div>
          </div>
        </Card>
        <Card className="stat-card">
          <div className="stat-content">
            <div className="stat-info">
              <div className="stat-label">阅读中</div>
              <div className="stat-value">1,234</div>
            </div>
            <div className="stat-icon processing">
              <ClockCircleOutlined />
            </div>
          </div>
        </Card>
        <Card className="stat-card">
          <div className="stat-content">
            <div className="stat-info">
              <div className="stat-label">已完成</div>
              <div className="stat-value">1,156</div>
            </div>
            <div className="stat-icon success">
              <CheckCircleOutlined />
            </div>
          </div>
        </Card>
        <Card className="stat-card">
          <div className="stat-content">
            <div className="stat-info">
              <div className="stat-label">平均完成率</div>
              <div className="stat-value">68.5%</div>
            </div>
            <div className="stat-icon info">
              <PercentageOutlined />
            </div>
          </div>
        </Card>
      </div>

      {/* 操作按钮和表格 */}
      <Card className="table-card">
        <div className="table-toolbar">
          <div className="toolbar-title">阅读记录列表</div>
          <Button icon={<DownloadOutlined />} onClick={handleDownload}>
            导出数据
          </Button>
        </div>

        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={mockData}
          loading={loading}
          pagination={{
            total: 2568,
            current: 1,
            pageSize: 50,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条`,
            pageSizeOptions: ['10', '20', '50', '100']
          }}
          scroll={{ x: 1400 }}
        />
      </Card>
    </div>
  )
}

export default ReadingRecords
